<template>
  <div class="store_box">
    <div class="slide" v-for="(item, index) in dataList" :key="index">
      <img :src="item.productImage" alt="" />
      <div class="store_title">{{ item.productName }}</div>
      <div class="Price">{{ item.salePrice }}</div>
      <button class="togoCart" @click="onClick(item)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataAll: [],
      dataList: [],
    };
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      this.dataAll = res.data.result.list;
      this.dataAll.forEach((element) => {
        if (element.salePrice < 100) {
          this.dataList.push(element);
        }
      });
      console.log(this.dataAll);
    });
  },
};
</script>

<style lang="scss">
.store_box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.slide {
  width: 230px;
  height: 300px;
  background-color: white;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  img {
    width: 90%;
    height: 200px;
  }
  .store_title {
    width: 90%;
    font-size: 14px;
  }
  .Price {
    width: 90%;
    font-size: 14px;
    color: red;
  }
  .togoCart {
    width: 90%;
    height: 35px;
    border: 1px solid red;
    background-color: white;
  }
}
@media screen and (max-width: 990px) {
  .slide {
    width: 220px;
    height: 300px;
    background-color: white;
    margin-top: 10px;
  }
}
@media screen and (max-width: 1024px) {
  .slide {
    width: 100%;
    height: 110px;
    background-color: white;
    margin-top: 10px;
    .el-col-4 {
      display: none;
      background-color: blue;
    }
  }
}
</style>
